<template>
    <div id='fhjsljqk'>
        <div class="rfdwList_box table">
          <div class='reportFormHeader'>
              <el-col :span='3'>
                  <div class='search'>
                      <el-select
                              class="noBg border1 selectYear"
                              v-model="year"
                              placeholder="请选择">
                          <el-option
                                  v-for="(option, index) in yearArr"
                                  :key="index"
                                  :label="option"
                                  :value="option"
                          ></el-option>
                      </el-select>
                  </div>
              </el-col>
              <el-col :span='18'>
                  <div class='tableTitle'>防护建设累计情况综合统计表</div>
              </el-col>
              <el-col :span="3">
                  <div class="rightSpace flexEnd">
                      <el-button class="btnDefault" @click="exportFhjs">导出</el-button>
                  </div>
              </el-col>
          </div>
            <el-table
                    class="bbtable"
                    :data='sliceData'
                    border
                    styel='width: 100%;height: 500px'>
                <el-table-column
                        v-for="(item,index) in tableHeader"
                        :key=index
                        :label="item.value"
                        :prop="item.index">
                </el-table-column>

            </el-table>
          <div class="page">
              <pages :page="page" @changePage="changePage"></pages>
          </div>
        </div>
    </div>
</template>

<script>
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";

  export default {
    name: "fhjsljqk",
    data(){
      return{
        year: '2019',
        yearArr:[],
        page: {
          //总条数
          total: 30,
          //每页条数
          limit: 15,
          //当前页数
          currentPage: 1,
          pageSizes: [5, 10,15],
          //实际返回的条数
          dataLength: 7
        },
        sliceData:[],
        pagedata:[],
        tableHeader:[],
        tableData:[]
      }
    },
    methods:{
      //导出fhjs
      exportFhjs(){
        this.$store.state.loadingFlag=true
        baseServe.exportzyjjmb({  rfdwnm: localStorage.getItem("rfdwnm"),year:2019}).then(()=>{
          window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/fhjs?rfdwnm=${localStorage.getItem("rfdwnm")}&year=${this.year}`)
          this.$store.state.loadingFlag=false
        })
      },
      async getdata(){
           this.$store.state.loadingFlag = true;
        this.$store.state.bbyear=this.year
        await baseServe.fhjsljqkdata({year:this.year,rfdwnm :localStorage.getItem('rfdwnm')}).then(res =>{
          this.tableHeader = res.data.heads
          this.tableData = res.data.datas
          this.$store.state.loadingFlag = false;
          this.page.total = this.tableData.length;
          this.page.currentPage=1
          this.pages();
        })

      },
      changePage(data) {
        this.page = data;
        this.pages();
        // this.userList1();
      },
      getYearArr(){
        this.yearArr = []
        let year=new Date().getFullYear()
        for(let i=0;i<10 ;i++){
          this.yearArr.push(year-i)
        }
      },
      pages() {
        this.page.total = this.tableData.length;

        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
      },
    },
    watch:{
      year() {
        this.getdata()
      }
    },
    mounted() {
      this.getdata()
      this.getYearArr()
    },
    components:{
      pages
    }
  }
</script>

<style lang='less'>
    @import "../../assets/css/global.css";
    .bbtable {
        height: 531px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(5, 230, 230, 0.6);
            border-radius: 30px;
        }
    }
</style>
